<template>
    <div style="width: 80%;margin: 0 auto;">

        <el-descriptions title="订单详情" direction="vertical" :column="3" size="32px" border>
            <el-descriptions-item>
                <div style="width: 200px;">
                    <img :src="order.skuPicture" style="width: 100%;object-fit: cover">
                </div>
            </el-descriptions-item>
            <el-descriptions-item label="商品名">{{ order.skuName }}</el-descriptions-item>
            <el-descriptions-item label="下单时间">{{ formatDateTime(order.createTime) }}</el-descriptions-item>
            <el-descriptions-item label="价格">￥{{ order.price }}</el-descriptions-item>
            <el-descriptions-item label="地址" :span="2">{{ order.province }}{{ order.city }}{{ order.district }}{{
                order.detailAddress }}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{ order.phoneNumber }}</el-descriptions-item>
            <el-descriptions-item label="数量">{{ order.num }}</el-descriptions-item>
        </el-descriptions><br><br>
        <el-button type="primary" @click="alipay()">去支付</el-button>
    </div>
</template>

<script setup lang="ts">
import api from '@/api';
import { ElNotification } from 'element-plus';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router'

const route = useRoute()

const order = ref({
    id: route.params.id,
    skuName: '',
    skuPicture: '',
    price: '',
    consignee: '',
    province: '',
    city: '',
    district: '',
    detailAddress: '',
    phoneNumber: '',
    createTime: '',
    num:''
})

onMounted(() => {
    getOrderById()
})

function getOrderById() {
    api.orders.getOrderById({ id: order.value.id })
        .then(response => {
            // 在这里可以处理提交成功后的逻辑
            order.value.skuName = response.data.data.skuName
            order.value.skuPicture = response.data.data.skuPicture
            order.value.price = response.data.data.price
            order.value.consignee = response.data.data.consignee
            order.value.province = response.data.data.province
            order.value.city = response.data.data.city
            order.value.district = response.data.data.district
            order.value.detailAddress = response.data.data.detailAddress
            order.value.phoneNumber = response.data.data.phoneNumber
            order.value.createTime = response.data.data.createTime
            order.value.num = response.data.data.num

            aliPayBean.value.out_trade_no = response.data.data.orderNumber
            aliPayBean.value.subject = response.data.data.skuName
            aliPayBean.value.total_amount = response.data.data.price

            ElNotification({
                title: 'Success',
                message: response.data.msg,
                type: 'success',
                duration: 1500
            })

        })
        .catch(error => {
            ElNotification({
                title: 'Error',
                message: error.data.msg,
                type: 'error',
                duration: 1500
            })
            // 在这里可以处理提交失败后的逻辑
        });
}

function formatDateTime(createTime: string) {
    const date = new Date(createTime);
    return date.toLocaleString();
}

const aliPayBean = ref({
    out_trade_no: '',
    subject: '',
    total_amount: '',
})

function alipay(){
    api.pay.alipay(aliPayBean.value)
    .then(response => {
            // 在这里可以处理提交成功后的逻辑
            const divForm = document.getElementsByTagName('div')
          if (divForm.length) {
            document.body.removeChild(divForm[0])
          }
          const div = document.createElement('div')
          div.innerHTML = response.data.data // data就是接口返回的form 表单字符串
          document.body.appendChild(div)
          document.forms[0].setAttribute('target', '_blank') // 新开窗口跳转
          document.forms[0].submit()

            
        })
        .catch(error => {
            ElNotification({
                title: 'Error',
                message: error.data.msg,
                type: 'error',
                duration: 1500
            })
            // 在这里可以处理提交失败后的逻辑
        });
}

</script>

<style scoped></style>